<template>
    <div id="box">
        
        <Shead></Shead>
        <div class="flex">
            <Sbanner></Sbanner>
            <Swater></Swater>
        </div>
        <Tail></Tail>
    </div>
</template>

<script>
import Shead from "../components/Shead.vue";
import Sbanner from "../components/Sbanner.vue";
import Swater from "../components/Swater.vue";

import Tail from "../components/Footer.vue";
//  console.log(this.$route.params.id)
export default {
    // props:["id"],
    name:"SCENE",
    components:{
    Shead,Sbanner,Tail,Swater
    }
}

</script>

<style scoped>
  #box{
    display: flex;
    height: 100%;
    flex-direction: column;
}
.classification{
    height: 1.2rem;
}

.shuffling{
flex: 1;
height: 100%;
overflow: auto;
/* background: skyblue;; */
}  
.Tail{
    height: 0.5rem;;
}
.flex{
    flex: 1;
    height: 100%;
    overflow: auto;

    /* display: flex;
    flex-direction: column; */
}




</style>
